<template>
  <div class="home">
    <div class="rule" @click="ruleVisible = true">
      活动规则
    </div>
    <div class="deadline">
      <div class="title">距离活动结束还有</div>
      <div class="time">
        <span class="number">{{days}}</span>
        <span class="unit">天</span>
        <span class="number">{{hours}}</span>
        <span class="unit">时</span>
        <span class="number">{{minutes}}</span>
        <span class="unit">分</span>
        <span class="number">{{seconds}}</span>
        <span class="unit">秒</span>
      </div> 
    </div>
    <div class="user-area">
      <img class="user-img" src="../assets/image/rect.png" alt="" />
      <!-- <img class="paper-img" src="../assets/image/paper.png" alt="" /> -->
      <div class="name">
        <div class="home-icon">
          <img class="user-img" src="../assets/image/user_icon.png" alt="" />
        </div>
        <div class="text">{{userInfo.userName}}</div>
      </div>
      <!-- <div class="company">
        <div class="home-icon">
          <img class="user-img" src="../assets/image/company_icon.png" alt="" />
        </div>
        <div class="text">{{userInfo.phone}}</div>
      </div> -->
      <div class="antrance">
        <img @click="goAnswer" class="user-img" src="../assets/image/competition.png" alt="" />
        <img @click="myRecord" class="user-img" src="../assets/image/my_record.png" alt="" />
      </div>
    </div>
    <div class="org">
      <div class="org1">
        <span>指导单位：共青团北京市委员会 北京市司法局</span>
      </div>
      <div class="org1">
        <span>主办单位：北京市青少年法律与心理咨询服务中心</span>
      </div>
      <div class="org1">
        <span>协办单位：北京市律师协会</span>
      </div>
    </div>
    <van-dialog v-model="ruleVisible" :lock-scroll="true" :show-confirm-button="false">
      <div class="frame-area">
        <!-- <img class="frame-img" src="../assets/image/frame.png" alt="" /> -->
        <img @click="ruleVisible = false" class="close-img" src="../assets/image/close.png" alt="" />
        <div class="frame-content">
          <div class="paragraph">
            <div>一、活动目的</div>
            <div>本活动旨在通过线上随机答题的方式，普及法律知识，提高青少年的法治意识，营造尊法学法守法用法的良好氛围。</div>
          </div>
          <div class="paragraph">
            <div>二、活动时间</div>
            <div>活动自2024年11月1日起至11月30日止，参赛者需在此期间内完成答题。</div>
          </div>
          <div class="paragraph">
            <div>三、参与方式</div>
            <div>注册报名：参赛者需通过活动链接进行报名，填写真实姓名、联系方式等基本信息。</div>
            <div>登录答题：注册成功后，参赛者使用注册账号登录答题系统，即可开始答题。</div>
          </div>
          <div class="paragraph">
            <div>四、答题规则</div>
            <div>1、题目类型包括单选题、多选题、判断题。</div>
            <div>2、共10道题，全部答对可获得一份电子参赛证明。</div>
          </div>
          <div class="paragraph">
            <div>五、注意事项</div>
            <div>活动组织方保留对本次活动规则的最终解释权，并根据实际情况进行适当调整。</div>
          </div>
        </div>
      </div>
    </van-dialog>
    <van-dialog v-model="entranceVisible" :lock-scroll="true" :show-confirm-button="false">
      <div class="frame-area-result">
        <!-- <img @click="resultVisible = false" class="close-img" src="../assets/image/close.png" alt="" /> -->
        <div @click="entranceVisible = false" class="close-img"></div>
        <div class="frame-content">
          <div class="result-title">
          </div>
          <div class="detail">
            <span>只要答对所有题目，即可赢得一份电子荣誉证书，以表彰您在法律知识领域的杰出表现。请再接再厉，勇于挑战，奋力争取这份法治之光的荣誉吧！</span>
          </div>
          <div class="result-btn">
            <span @click="goAnswer">继续挑战</span>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      ruleVisible: false,
      entranceVisible: false,
      userInfo: JSON.parse(localStorage.getItem('userInfo')) || {},
      // 设置活动结束的时间戳（毫秒）  
      eventEndTime: new Date('2024-11-30T23:59:59').getTime(), // 替换为实际的活动结束时间  
      timer: null, // 存储 setInterval 的返回值，用于清除定时器  
      days: '',
      hours: '',
      minutes: '',
      seconds: '',
    }
  },
  mounted () {
    this.eventEndTime = new Date(this.userInfo.endDatetime).getTime()
    // 确保清除
    clearInterval(this.timer);
    // 在组件挂载后开始倒计时  
    this.startCountdown();
  },
  beforeDestroy () {
    // 在组件销毁前清除 interval，以防内存泄漏  
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    startCountdown () {
      this.timer = setInterval(() => {
        console.log('定时器是否还在？？？')
        this.getCountResult()
        // 但是，如果倒计时结束，我们需要清除 interval  
        if (this.eventEndTime <= new Date().getTime()) {
          clearInterval(this.timer);
          // 你可以在这里添加活动结束后的逻辑，比如显示一个消息  
          alert('活动已结束！');
        }
      }, 1000);
    },
    getCountResult () {
      const now = new Date().getTime();
      const distance = this.eventEndTime - now;
      this.days = Math.floor(distance / (1000 * 60 * 60 * 24));
      this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      this.seconds = Math.floor((distance % (1000 * 60)) / 1000);
    },
    myRecord () {
      if (this.userInfo.pass != 'fail') {
        this.goCert()
      } else {
        this.entranceVisible = true
      }
    },
    goAnswer () {
      // this.$router.push("/answer");
      this.$router.replace("/answer");
    },
    goCert () {
      // this.$router.push("/cert");
      this.$router.replace("/cert");
    },
  }
}
</script>
<style lang="scss" scoped>
.home {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 943px;
  box-sizing: border-box;
  background: url('../assets/image/home_bg.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 186px;
  .rule {
    position: absolute;
    height: 22px;
    line-height: 22px;
    width: 50px;
    padding-left: 10px;
    border-radius: 23px 0 0 23px;
    top: 20px;
    right: 0;
    color: #fff;
    background: rgba(255, 255, 255, 0.3);
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 12px;
  }
  .deadline {
    .title {
      margin: 0 auto;
      width: 130px;
      background: #007de9;
      border-radius: 10px;
      background: rgba(0, 125, 233, 0.3);
      font-weight: 400;
      font-size: 12px;
      color: #ffffff;
      height: 19px;
      line-height: 19px;
      text-align: center;
    }
    .time {
      margin: 0 auto;
      margin-top: 9px;
      width: 100%;
      height: 26px;
      line-height: 26px;
      text-align: center;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      .number {
        display: inline-block;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 5px;
        width: 26px;
        font-family: DINAlternate;
        font-weight: bold;
        font-size: 17px;
        color: #0a92e4;
      }
    }
  }
  .user-area {
    position: absolute;
    top: 400px;
    margin-top: 60px;
    width: 100%;
    text-align: center;
    .user-img {
      width: 352px;
    }
    .paper-img {
      position: absolute;
      left: 48%;
      top: -8px;
      width: 60px;
    }
    .name,
    .company {
      position: absolute;
      left: 62px;
      display: flex;
      justify-content: center;
      align-items: center;
      .home-icon {
        font-size: 20px;
        margin-right: 12px;
        .user-img {
          width: 22px;
        }
      }
    }
    .name {
      top: 58px;
      .text {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 19px;
        color: #ffffff;
      }
    }
    .company {
      top: 74px;
      .text {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 15px;
        color: #ffffff;
      }
    }
    .antrance {
      position: absolute;
      top: 120px;
      .user-img {
        width: 70%;
        margin-top: 20px;
      }
    }
  }
  .org {
    position: absolute;
    bottom: 56px;
    left: 95px;
    margin: 0 auto;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 10px;
    color: #f8f8f8;
    .org1 {
      margin-bottom: 8px;
    }
  }
  .frame-area {
    position: relative;
    width: 100%;
    height: 480px;
    background: url('../assets/image/frame.png');
    background-clip: content-box;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    .frame-img {
      width: 100%;
    }
    .frame-content {
      padding: 0 40px 200px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 15px;
      color: #333333;
      line-height: 23px;
      height: 360px;
      overflow: auto;
      position: relative;
      top: 90px;
      .paragraph {
        margin-bottom: 10px;
      }
    }
    .close-img {
      width: 34px;
      position: absolute;
      top: 24px;
      right: 0;
    }
  }
  .frame-area-result {
    position: relative;
    width: 100%;
    height: 480px;
    .frame-img {
      width: 100%;
    }
    .frame-content {
      padding: 0 27px 200px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 15px;
      color: #333333;
      line-height: 23px;
      height: 360px;
      overflow-y: auto;
      position: relative;
      top: 54px;
      .detail {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 15px;
        color: #333333;
        line-height: 26px;
        // padding-top: 18px;
        text-indent: 2em;
      }
      .right-answer {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 16px;
        color: #0699e9;
        line-height: 18px;
      }
      .under-line {
        width: 125px;
        height: 9px;
        background: #0699e9;
        border-radius: 5px;
        opacity: 0.1;
        position: relative;
        top: -6px;
        left: -6px;
      }
    }
    .close-img {
      width: 34px;
      height: 34px;
      position: absolute;
      top: 0px;
      right: 0px;
    }
    .result-btn {
      margin: 30px auto 0;
      text-align: center;
      width: 154px;
      height: 39px;
      line-height: 39px;
      background: #0699e9;
      border-radius: 20px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 17px;
      color: #ffffff;
    }
    .result-title {
      margin: 0 auto;
      text-align: center;
      width: 263px;
      height: 37px;
      line-height: 37px;
      border-radius: 23px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 15px;
      color: #0699e9;
    }
  }
  .frame-area-result {
    background: url('../assets/image/result_dialog.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 280px;
    .frame-content {
      height: 280px;
      top: 40px;
    }
  }
}
</style>
<style lang="scss" >
.home {
  .van-dialog {
    background: transparent;
    top: 50%;
  }
}
</style>